<template>
  <div id="joinLabour">
    <div class="container">
      <div class="container-v">
        <div class="subtitle">项目负责人</div>
        <div class="project-leader">
          <ul class="md-links">
            <li class="md-links-item">
              <a href="#">
                <img
                  class="lozad"
                  :data-src="imgDaiSir"
                  :onerror="img404Url"
                  height="72px"
                  :src="imgDaiSir"
                  data-loaded="true"
                />
                <div class="md-links-title">
                  Buried-LoveBoy
                  <br />
                </div>
                <div class="md-links-des links-des">邮箱: 1686518809@qq.com</div>
                <div class="md-links-des">
                  简介: 各位同学们大家好! 我是 BF-Design 项目的发起者与负责人，本人目前在北京某中型企业做技术负责人。对于工作协调、项目把控整体把控有自己的经验。
                  我从事过航空行业、艺术教育行业，比较突出的技术为GIS、WebGL、IM以及RTC等。 最后我们尽最大努力把 BF-Design 不断优化做的更好。也同样期待加入我们的你!
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="subtitle">研发贡献者</div>
        <div class="post-cards">
          <ul class="md-links">
            <li class="md-links-item" v-for="item in programmerList" :key="item.githubUrl">
              <a :href="item.githubUrl" target="_black">
                <img
                  class="lozad"
                  :data-src="item.avatarUrl"
                  :onerror="img404Url"
                  height="72px"
                  :src="item.avatarUrl"
                  data-loaded="true"
                />
                <div class="md-links-title">
                  {{item.name}}
                  <br />
                </div>
                <div class="md-links-des">{{item.des}}</div>
              </a>
            </li>
            <li class="md-links-item"></li>
          </ul>
        </div>
        <div class="subtitle">文档贡献者</div>
        <div class="post-cards">
          <ul class="md-links">
            <li class="md-links-item" v-for="item in docerList" :key="item.githubUrl">
              <a :href="item.githubUrl" target="_black">
                <img
                  class="lozad"
                  :data-src="item.avatarUrl"
                  :onerror="img404Url"
                  height="72px"
                  :src="item.avatarUrl"
                  data-loaded="true"
                />
                <div class="md-links-title">
                  {{item.name}}
                  <br />
                </div>
                <div class="md-links-des">{{item.des}}</div>
              </a>
            </li>
            <li class="md-links-item"></li>
          </ul>
        </div>
        <div class="subtitle">设计师</div>
        <div class="post-cards">
          <ul class="md-links">
            <li class="md-links-item" v-for="item in designerList " :key="item.githubUrl">
              <a :href="item.githubUrl" target="_black">
                <img
                  class="lozad"
                  :data-src="item.avatarUrl"
                  :onerror="img404Url"
                  height="72px"
                  :src="item.avatarUrl"
                  data-loaded="true"
                />
                <div class="md-links-title">
                  {{item.name}}
                  <br />
                </div>
                <div class="md-links-des">{{item.des}}</div>
              </a>
            </li>
            <li class="md-links-item"></li>
          </ul>
        </div>
        <div class="subtitle">鸣谢</div>
        <div class="post-cards">
          <ul class="md-links">
            <li class="md-links-item" v-for="item in thanks" :key="item.githubUrl">
              <a :href="item.githubUrl" target="_black">
                <img
                  class="lozad"
                  :data-src="item.avatarUrl"
                  :onerror="img404Url"
                  height="72px"
                  :src="item.avatarUrl"
                  data-loaded="true"
                />
                <div class="md-links-title">
                  {{item.name}}
                  <br />
                </div>
                <div class="md-links-des">{{item.des}}</div>
              </a>
            </li>
            <li class="md-links-item"></li>
          </ul>
        </div>
        <div class="subtitle">贡献注意事项</div>
        <p
          style="text-indent: 2em;"
        >1. 贡献组件代码前请务必先与项目负责人联系 1686518809@qq.com，确定好开发内容和 API，以免产生不必要或重复的工作。</p>
        <div class="subtitle">展望未来</div>
        <div class="subtitle">赞助</div>
      </div>
    </div>
    <footerBar />
  </div>
</template>
<script>
import img404 from "../../assets/404/friend_404.gif";
import footerBar from "../../components/footer.vue";
import { JinSir, DingSir, DaiSir } from "./rersonnelList";
export default {
  name: "joinLabour",
  components: {
    footerBar,
  },
  data() {
    return {
      programmerList: [
        {
          name: "Buried-LoveBoy",
          avatarUrl: DaiSir,
          des: "不复明日，未来可期 !",
          githubUrl: "",
        },
      ],
      docerList: [
        {
          name: "Buried-LoveBoy",
          avatarUrl: DaiSir,
          des: "不复明日，未来可期 !",
          githubUrl: "",
        },
      ],
      designerList: [
        {
          name: "Buried-LoveBoy",
          avatarUrl: DaiSir,
          des: "不复明日，未来可期 !",
          githubUrl: "",
        },
      ],
      thanks: [
        {
          name: "Ding Sir",
          avatarUrl: DingSir,
          des: "不凡科技项目经理",
          githubUrl: "",
        },
        {
          name: "Jin Sir",
          avatarUrl: JinSir,
          des: "不凡科技运营主管",
          githubUrl: "",
        },
      ],
    };
  },
  computed: {
    img404Url() {
      return `onerror=null;src='${img404}'`;
    },
    imgDaiSir() {
      return DaiSir;
    },
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
#joinLabour {
  .container {
    width: 100%;
    .container-v {
      width: 1260px;
      margin: 0 auto;

      .title {
        font-size: 26px;
        font-weight: bold;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        line-height: 26px;
        margin-top: 8px;
        color: #000000d9;
      }
      .subtitle {
        clear: both;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 50px;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        color: #000000d9;
      }
      p {
        margin: 8px 0;
        font-size: 14px;
        color: #666;
        letter-spacing: 0.5pt;
      }
      .project-leader {
        margin-top: 5px;
        min-height: 100px;
        padding: 0 15px;
        border-radius: 15px;
        transition: all 0.3s;
        cursor: pointer;
        .md-links {
          min-height: calc(100% - 120px - 5pc - 6em);
          text-align: left;
          padding: 0;
          margin: 0 auto;
          overflow: hidden;
          li {
            width: 100%;
            float: left;
            list-style: none;
            a {
              color: #333;
              text-decoration: none;
              img {
                float: left;
                border-radius: 50%;
                margin: 10px;
                width: 125px;
                height: 125px;
                padding: 4px;
                max-width: 100%;
                border: 0px solid #eaeefb;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -o-transition: all 0.2s;
                -ms-transition: all 0.2s;
                transition: all 0.2s;
              }
              .md-links-title {
                padding-top: 16px;
                padding-right: 10px;
                font-size: 20px;
                font-weight: bold;
                height: 45px;
                overflow: hidden;
                white-space: nowrap;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
              }
              .md-links-des {
                font-size: 12px;
                margin-top: 5px;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
              .links-des {
                height: 25px;
                line-height: 25px;
              }
            }
          }
        }
        &:hover {
          box-shadow: 0 4px 8px 6px rgba(7, 17, 27 / 6%, 0.12);
        }
      }
      .post-cards {
        margin-top: 5px;
        min-height: 100px;
        padding: 0 15px;
        border-radius: 15px;
        .md-links {
          min-height: calc(100% - 120px - 5pc - 6em);
          text-align: center;
          padding: 0;
          margin: 0 auto;
          overflow: hidden;
          li {
            width: calc(100% / 3 - 50px);
            float: left;
            list-style: none;
            a {
              color: #333;
              text-decoration: none;
            }
            img {
              float: left;
              border-radius: 35px;
              margin: 11px 10px;
              width: 70px;
              height: 70px;
              padding: 4px;
              max-width: 100%;
              border: 0px solid #eaeefb;
              -webkit-transition: all 0.2s;
              -moz-transition: all 0.2s;
              -o-transition: all 0.2s;
              -ms-transition: all 0.2s;
              transition: all 0.2s;
            }
            .md-links-title {
              padding-top: 16px;
              padding-right: 10px;
              font-size: 20px;
              font-weight: bold;
              height: 45px;
              overflow: hidden;
              white-space: nowrap;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
            }
            .md-links-des {
              padding: 15px 10px;
              font-size: 13px;
              overflow: hidden;
              height: 50px;
              white-space: nowrap;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
            }
            &:hover img {
              filter: unqoute(
                "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
              );
              -webkit-transform: rotate(540deg);
              -moz-transform: rotate(540deg);
              -o-transform: rotate(540deg);
              -ms-transform: rotate(540deg);
              transform: rotate(540deg);
            }
          }
          .md-links-item {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              z-index: -1;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: 23px;
              background: #d3b5e6 !important;
              -webkit-transform: scale(0);
              -moz-transform: scale(0);
              -o-transform: scale(0);
              -ms-transform: scale(0);
              transform: scale(0);
              -webkit-transition-property: -webkit-transform;
              -moz-transition-property: -moz-transform;
              -o-transition-property: -o-transform;
              -ms-transition-property: -ms-transform;
              transition-property: transform;
              -webkit-transition-duration: 0.3s;
              -moz-transition-duration: 0.3s;
              -o-transition-duration: 0.3s;
              -ms-transition-duration: 0.3s;
              transition-duration: 0.3s;
              -webkit-transition-timing-function: ease-out;
              -moz-transition-timing-function: ease-out;
              -o-transition-timing-function: ease-out;
              -ms-transition-timing-function: ease-out;
              transition-timing-function: ease-out;
            }
            &:hover:before {
              border-radius: 23px;
              -webkit-transform: scale(1);
              -webkit-transform: scale(1);
              -moz-transform: scale(1);
              -o-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
            }
          }
        }
      }
    }
  }
}
</style>